.new-payload-table {
    :global {
        // table相关
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            padding: 8px 16px;
        }
        .ant-table-thead > tr > th {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
            background: var(--Colors-Use-Neutral-Bg);
        }
        .ant-table.ant-table-bordered > .ant-table-container{
            border-color: var(--Colors-Use-Neutral-Border);
        }
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table, .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table{
            border-color: var(--Colors-Use-Neutral-Border);
        }
        .ant-table-tbody{
            background-color: var(--Colors-Use-Basic-Background);
        }
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
            border-bottom: 1px solid var(--Colors-Use-Neutral-Border);
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th,
        .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
            border-right: 1px solid var(--Colors-Use-Neutral-Border);
        }
        .ant-table-tbody > tr.ant-table-row:hover > td,
        .ant-table-tbody > tr > td.ant-table-cell-row-hover {
            background: var(--Colors-Use-Neutral-Bg-Hover);
        }
        .ant-table-filter-trigger:hover {
            color: transparent;
            background: transparent;
        }
        // 分页相关
        .ant-pagination-item-active {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-item-active a {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-pagination-item:hover a {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-pagination-prev:hover .ant-pagination-item-link,
        .ant-pagination-next:hover .ant-pagination-item-link {
            color: var(--Colors-Use-Main-Primary);
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
        .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
            color: var(--Colors-Use-Main-Primary);
        }
        .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
            border-color: var(--Colors-Use-Main-Border);
            box-shadow: 0 0 0 2px rgb(242 139 68 / 20%);
        }
        .ant-pagination-options-quick-jumper input:hover {
            border-color: var(--Colors-Use-Main-Border);
        }
        .ant-pagination-options-quick-jumper input:focus,
        .ant-pagination-options-quick-jumper input-focused {
            border-color: var(--Colors-Use-Main-Border);
            box-shadow: 0 0 0 2px rgb(242 139 68 / 20%);
        }
        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
            background-color: rgba(242, 139, 68, 0.1);
        }
    }
    .order {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .basic {
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
    }
    .table-operation {
        display: flex;
        justify-content: center;
        .copy {
            cursor: pointer;
            color: var(--Colors-Use-Neutral-Text-3-Secondary);
        }
        .delete {
            cursor: pointer;
            color: var(--Colors-Use-Error-Primary);
        }
        .edit {
            cursor: pointer;
            color: var(--Colors-Use-Neutral-Text-3-Secondary);
        }

        svg {
            height: 16px;
            width: 16px;
        }
    }
    .show-total {
        color: var(--Colors-Use-Neutral-Text-3-Secondary);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
    .selector-icon {
        color: var(--Colors-Use-Neutral-Text-3-Secondary);
        svg {
            width: 16px;
            height: 16px;
        }
        &:hover {
            color: var(--Colors-Use-Main-Primary);
        }
    }
    .active-selector-icon {
        color: var(--Colors-Use-Main-Primary);
    }
    .selected-row {
        border: 2px solid var(--Colors-Use-Blue-Bg); /* 选择你希望的边框样式 */
    }
}
.filter-box {
    padding: 6px 4px;
    .filter-item {
        padding: 6px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        .icon {
            color: var(--Colors-Use-Neutral-Text-3-Secondary);
            width: 16px;
            height: 16px;
            display: flex;
            svg {
                width: 16px;
                height: 16px;
            }
        }
        .content {
            font-size: 12px;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-weight: 400;
            line-height: 16px;
            user-select: none;
        }
    }
    .hover-filter-item {
        &:hover {
            border-radius: 4px;
            background: var(--Colors-Use-Neutral-Bg-Hover);
        }
    }
    .active-filter-item {
        .icon {
            color: var(--Colors-Use-Main-Primary);
        }
        .content {
            color: var(--Colors-Use-Main-Primary);
        }
        border-radius: 4px;
        background: var(--Colors-Use-Basic-Background);
    }
}
.payload-edit-form {
    padding: 8px 24px 8px 24px;
    .name {
        display: flex;
        flex-direction: row;
        gap: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 6px;
        .must {
            color: var(--Colors-Use-Red-Primary);
        }
    }
    .opt-btn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
        margin-bottom: 16px;
    }
    :global {
        .ant-form-item-label {
            padding-bottom: 0px;
        }
    }
}
.td-active-border {
    border: 1px solid var(--Colors-Use-Main-Primary) !important;
    padding: 7px 15px !important;
}
